<template>
	<view>
		<page-header></page-header>
		<view class="container" :style="{ marginTop: `${getPadding + 60}px` }">
			<page-banner :show="isBtn" @type="getType"></page-banner>
			<page-tab></page-tab>
			<template v-if="direction === 1">
				<page-select type="1"></page-select>
				<view class="prodect-list" v-for="item1 in 30" :key="item1"><prodect-card direction="vertical" v-for="item in 2" :key="item + 1"></prodect-card></view>
			</template>
			<template v-if="direction === 2">
				<page-select type="1"></page-select>
				<view class="prodect-list" v-for="item1 in 30" :key="item1"><prodect-card direction="transverse" type="2" ></prodect-card></view>
			</template>
		</view>
	</view>
</template>

<script>
import pageHeader from '@/components/page-header/page-header.vue';
import pageBanner from '@/components/page-banner/page-banner.vue';
import pageTab from '@/components/page-tab/page-tab.vue';
import pageSelect from '@/components/page-select/page-select.vue';
import prodectCard from '@/components/prodect-card/prodect-card.vue';

export default {
	components: {
		pageHeader,
		pageBanner,
		pageTab,
		pageSelect,
		prodectCard
	},
	data() {
		return {
			isBtn: true,
			direction: 1
		};
	},
	computed: {
		getPadding() {
			return this.$store.state.systemInfo.statusBarHeight;
		}
	},
	onLoad() {},
	methods: {
		toLogin(index) {
			if (index === 1) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			} else {
				uni.navigateTo({
					url: '/pages/login-wx/login-wx'
				});
			}
		},
		btnShow() {
			this.isBtn = !this.isBtn;
		},
		getType(e) {
			console.log(e);
			this.direction = e;
		}
	}
};
</script>

<style>
page {
	background: #f4f4f4;
}

.container {
}

.prodect-list {
	width: calc(100% - 60rpx);
	display: flex;
	justify-content: space-between;
	margin: 20rpx 30rpx;
}
</style>
